import React,{Component} from 'react';
import { View , Text,Image } from 'react-native';
import request from '../../../utils/request'
import {FRIENDS_TODAYBEST,BASE_URI} from '../../../utils/pathMap'
import IconFonts from '../../../components/IconFonts'
import { pxToDp } from '../../../utils/stylesKits';
    class Index extends Component{
        state = {
            perfectGirl:{"age": 20, "agediff": 0, "dist": 4741.1, "fateValue": 80, "gender": "女", "header": "/upload/161672248773113412000003.jpg", "id": 1472, "marry": "单身", "nick_name": "安安", "xueli": "大专"}
        }
        async componentDidMount(){
            const res = await request.privateGet(FRIENDS_TODAYBEST)
            this.setState({ perfectGirl: res.data[0] });
        }
        render(){
            const {perfectGirl} = this.state
            return(
                <View style={{flexDirection:"row",backgroundColor:"#ccc"}}>
                    <View style={{position:"relative"}}>
                        <Image style={{width:pxToDp(120),height:pxToDp(120)}} source={{uri:BASE_URI+perfectGirl.header}} />
                        <View style={{width:pxToDp(80),height:pxToDp(30),justifyContent:"center",alignItems:"center",borderRadius:pxToDp(10),left:0,bottom:pxToDp(10),position:"absolute",backgroundColor:"#b564bf"}}>
                            <Text style={{color:"#fff",fontSize:pxToDp(16)}}>今日佳人</Text>
                        </View>
                    </View>
                    <View style={{flex:1,flexDirection:"row"}}>
                        <View style={{flex:4,justifyContent:"space-around"}}>
                            <View style={{flexDirection:'row',alignItems:"center"}}>
                                <Text style={{color:"#555"}}>{perfectGirl.nick_name}</Text>
                                <IconFonts style={{fontSize:pxToDp(18),color:perfectGirl.gender === "女"?"#b564bf":"red"}}
                                name={perfectGirl.gender === "女"? "icontanhuanv":"icontanhuanan"} />
                                <Text style={{color:"#555"}}>{perfectGirl.age}岁</Text>
                            </View>
                            <View style={{flexDirection:'row'}}>
                                <Text style={{color:"#555"}}>{perfectGirl.marry}</Text>
                                <Text style={{color:"#555"}}>|</Text>
                                <Text style={{color:"#555"}}>{perfectGirl.xueli}</Text>
                                <Text style={{color:"#555"}}>|</Text>
                                <Text style={{color:"#555"}}>{perfectGirl.agediff<10? '年龄相仿':'有点代沟'}</Text>
                            </View>
                        </View>
                        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                            <View style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
                                <IconFonts name="iconxihuan" style={{fontSize:pxToDp(50),color:"red"}} />
                                <Text style={{position:"absolute",color:"#fff",fontSize:pxToDp(13),fontWeight:"bold"}}>{perfectGirl.fateValue}</Text>
                            </View>
                            <Text style={{color:"red",fontSize:pxToDp(13)}}>缘分值</Text>
                        </View>
                    </View>
                </View>
            );
        }
    }
export default Index;
